<template>
  <div id="app">
    <keep-alive>
      <transition name="move">
        <router-view></router-view>
      </transition>
    </keep-alive>
    <tabbar class="nav">
      <tabbar-item link="/">
        <i slot="icon" class="iconfont nav_ico icon-shouye"></i>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/list">
        <i slot="icon" class="iconfont nav_ico icon-icon2"></i>
        <span slot="label">分类</span>
      </tabbar-item>
      <tabbar-item link="/shopcar">
        <i slot="icon" class="iconfont nav_ico icon-shouye5"></i>
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item link="/user">
        <i slot="icon" class="iconfont nav_ico icon-shouye2"></i>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Tabbar, TabbarItem} from 'vux'
  import {bus} from './bus.js';

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    created() {
      bus.$on('coco', function () {
        console.log('ok')
      })
    }
  }

</script>

<style lang="less">
  body {
    background-color: #fbf9fe;
  }

  .nav {
    height: 50px;
    .weui_tabbar_item {
      padding: 5px 0 0;
    }
    .nav_ico {
      font-size: 24px;
      line-height: 1;
      color: #6b6b6b;
    }
    .weui_tabbar_icon + .weui_tabbar_label {
      margin-top: 2px;
    }
  }

  .move-enter-active, .move-leave-active {
    transition: all .3s ease-in-out
  }

  .move-enter-active {
    transition-delay: .3s
  }

  .move-enter, .move-leave-active {
    opacity: 0;
    transform: translateX(40px)
  }
</style>
